import React, { useState, useEffect, useMemo, useRef } from 'react';
import { Spin } from 'antd';

export default () => {
  let frame = useRef();
  const [spining, setspining] = useState(true);
  const [vs, setvs] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setvs(false);
    }, 100)
    setTimeout(() => {
      setvs(true);
    }, 500)
    setTimeout(() => {
      setvs(false);
    }, 1000)
    setTimeout(() => {
      setspining(false);
      setvs(true);
    }, 3000);
    return;
  }, [frame]);

  return (
    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>
      {spining && (
        <div
          style={{
            width: '100%',
            height: '100%',
            position: 'absolute',
            left: 0,
            top: 0,
            zIndex: 999,
            backgroundImage: `url(${require('@/assets/bac.jpg')})`,
          }}
          className="center"
        >
          <Spin spinning={spining} />
        </div>
      )}
      {
        vs && <iframe
          src="http://139.186.129.104:24200/#/user/unified-login?username=lhbcyh&password=lhby2021"
          id="isd"
          ref={frame}
          frameBorder="0"
          scrolling="no"
          style={{ width: '100%', height: 'calc(100% + 65px)', position: 'absolute', top: -65 }}
        />
      }
    </div>
  );
};
